Egenskap | Värde | XHTML element | Arv | % | Beskrivning | Exempel |
---|---|---|---|---|---|---|
Font | caption, icon, menu, message-box, small-caption, status-bar plus nedan stående värden | Alla element | Ja | Se nedan | Teckensnittets egenskaper som bestämmer font-family, font-size, font-variant, font-style font-weight, font-line och font-heigt. | font: arial,sans-serif,16pt, oblique |
Font-family | <family-name> <generic-family> |
Alla element | Ja | - | Används för att bestämma teckensnittet på ord | font-family:Arial font-family:fantasy font-family:comic font-family:Georgia |
font-size | <absolute-size> <relativ-size> <length> <percentage> |
Alla element | Ja | Relativ parent | Anger storleken på teckensnittet | font-size:8pt font-size:5mm font-size:21px
font-size:4pc |
font-style | normal italic oblique |
Alla element | Ja | - | Sätter stilen på fonten | font-style:italic font-style:oblique |
font-variant | normal small-caps |
Alla element | Ja | - | Bestämmer om om texten ska ha small-caps font eller en normal font | font-variant:small-caps |
font-weight | normal bold bolder lighter 1000 200 300 400
500 600 700 800 900 |
Alla element | Ja | - | Sätter tyngden på en font | font-weight:bold font-weight:bolder font-weight:lighter
font-weight:100 font-weight:200 font-weight:300
font-weight:400 font-weight:500 font-weight:600
font-weight:700 font-weight:800 font-weight:900 |
Egenskap | Värde | XHTML element | Arv | % | Beskrivning | Exempel |
---|---|---|---|---|---|---|
text-align | left right center justify <string> |
Blockelement | Ja | - | Bestämmer textens position till förhållande till marginalerna | text-align:center text-align:left text-align:right
text-align:justify |
text-decoration | none underline overline line-through blink |
Alla element | Ja | - | Ger texten sin dekoration | text-decoration:underline text-decoration:overline text-decoration:line-trough
text-decoration:blink |
text-indent | <lenght> <percentage> |
Blockelement | ja | referarer till parent bredd | Gör så att texten bli indragen | text-indent:1in text-indent:3em text-indent:15% |
text-transform | none capitalize uppercase lowercase |
Alla element | ja | - | kontrollerar bokstäverna i ett element | text-transform:capitalize text-transform:uppercase text-transform:lowercase |
white-space | normal pre nowrap |
Blockelement | ja | - | Bestämmer hur texten skall behandlas/space, tabbar och radbrytning | white-space:pre white-space:nowrap |
Egenskap | Värde | XHTML element | Arv | % | Beskrivning | Exempel |
---|---|---|---|---|---|---|
list-style | se nedan | tilldelas element med display | Ja | Se nedan | Ger egenskaper till listorna list-style-type, list-style-position, list-style-image |
|
list-style-image | none <url> | tilldelas element med display | Ja | - | Ger punkten sin bild som används i listan |
|
list-style-position | inside outside |
tilldelas element med display | Ja | - | bestämmer hur listan ska placeras runt listan |
|
list-style-type | none disc circle square decimal decimal-leading-zero lower-roman
upper-roman lower-alpha upper-alpha lower-greek lower-latin
upper-latin hebrew armenian georgian cjk-ideographic hiragana
katakana hiragana-iroha katakana-iroha |
tilldelas element med display | Ja | - | sätter utseedet på listmarkeringen(list-item) |
|
Egenskap | Värde | XHTML element | Arv | % | Beskrivning | Exempel |
---|---|---|---|---|---|---|
color | <color> | Alla Element | ja | - | sätter färgen på elementen | color:green |
Egenskap | Värde | XHTML element | Arv | % | Beskrivning | Exempel |
---|---|---|---|---|---|---|
visibility | visible hidden |
Alla Element | ja | - | Bestämmer om ett element ska synas eller ej | visibility: visible |
display | none inline block list-item run-in compact marker table inline-table
table-row-group table-header-group table-footer-group table-row table-column-group
table-column table-cell table-caption |
Alla element | nej | - | Bestämmer vad och hur ett element ska visas | display: block display: inline display: list-item display: run-in
display: compact display: marker display: table display: inline-table
display: table-row-group display: table-header-group display: table-footer-group
display: table-row display: table-column-group |
Egenskap | Värde | XHTML element | Arv | % | Beskrivning | Exempel |
---|---|---|---|---|---|---|
Backgroound | se nedan | Alla Element | nej | se nedan | Bestämmer bakgrunden på elementen. background-image, backgrund-attachment, background-color, background-position och background-repeat. | background= #6495ed |
Backgroound-image | none url |
Alla Element | nej | - | Bestämmer bakgrunden på elementen. | background-image= dingbat.gif |
backgrund-color | transparent <color> |
Alla Element | nej | - | Bestämmer bakgrundsfärgen på elementen. | background-color=#9872ed |
backgrund-position | <procent> <lenght> top left center
bottom right |
Alla Element | nej | Refererar till elementet själv | Bestämmer positionen på bakgrundsbilden | background-position: top left |
backgrund-repeat | repeat repeat-x repeat-y no-repeat |
Alla Element | nej | - | Bestämmer om och hur en bakgrundsbild ska repeteras | background-repeat: repeat-x background-repeat: repeat background-repeat: repeat-y
background-repeat: no-repeat |
Egenskap | Värde | XHTML element | Arv | % | Beskrivning | Exempel |
---|---|---|---|---|---|---|
margin | se nedan | Alla Element | nej | Refererar till bredden i blocket | Övergripande egenskap för marginalerna som bestämmer margin-left, margin-right, margin-top och margin-bottom. | margin: 30px |
margin-top | auto <lenght> <%> |
Alla Element | nej | Refererar till bredden i blocket | bestämmer den övre marginalen | margin-top: 50px |
margin-right | auto <lenght> <%> |
Alla Element | nej | Refererar till bredden i blocket | bestämmer den högra marginalen | margin-right: 3cm |
margin-bottom | auto <lenght> <%> |
Alla Element | nej | Refererar till bredden i blocket | bestämmer den nedre marginalen | margin-bottom: 4% |
margin-bottom | auto <lenght> <%> |
Alla Element | nej | Refererar till bredden i blocket | bestämmer den nedre marginalen | margin-left: 8pc |
Egenskap | Värde | XHTML element | Arv | % | Beskrivning | Exempel |
---|---|---|---|---|---|---|
border | Se border-color, border-style och border-width | Alla Element | nej | - | egenskaper för kantlinjerna som bestämmer färg, form och tjocklek på border. | border: thin dotted maroon |
border-top | Se border-color, border-style och border-width | Alla Element | nej | - | bestämmer färg, form och tjocklek för den övre kanten. | border-top: thin dotted maroon |
border-right | Se border-color, border-style och border-width | Alla Element | nej | - | bestämmer färg, form och tjocklek för den högra kanten. | border-right: none |
border-right | Se border-color, border-style och border-width | Alla Element | nej | - | bestämmer färg, form och tjocklek för den undre kanten. | border-bottom: none |
border-right | Se border-color, border-style och border-width | Alla Element | nej | - | bestämmer färg, form och tjocklek för den vänstra kanten. | border-bottom: none |
Egenskap | Värde | XHTML element | Arv | % | Beskrivning | Exempel |
---|---|---|---|---|---|---|
Padding | <lenght> <%> |
Alla Element | nej | Refererar till bredden i blocket | bestämmer padding-top, padding-right, padding-bottom och padding-left. Anger avståndet mellan element och kantlinje | padding: 0.4cm 1.5cm 1.5cm 1.4cm; |
Padding-top | <lenght> <%> |
Alla Element | nej | Refererar till bredden i blocket | bestämmer avståndet till den övre kantlinjen | padding-top: 10px |
Padding-right | <lenght> <%> |
Alla Element | nej | Refererar till bredden i blocket | bestämmer avståndet till den högra kantlinjen | padding-right: 15mm |
Padding-bottom | <lenght> <%> |
Alla Element | nej | Refererar till bredden i blocket | bestämmer avståndet till den nedre kantlinjen | padding-bottom: 3ex |
Padding-left | <lenght> <%> |
Alla Element | nej | Refererar till bredden i blocket | bestämmer avståndet till den vänstra kantlinjen | padding-bottom: 4pc |
Egenskap | Värde | XHTML element | Arv | % | Beskrivning | Exempel |
---|---|---|---|---|---|---|
width | auto <lenght> <%> |
Block | nej | Refererar till föräldern | bestämmer bredden på ett element | ![]() |
height | auto <lenght> |
Block | nej | - | bestämmer höjden på ett element | ![]() |
vertical-align | <lenght> <%> baseline sub super
top text-top middle bottom text-bottom |
inline element | nej | Refererar till line-height hos elemetet självt. | Bestämmer den vertikala placeringen av ett element i förhållande till ett tidigare element. | vertical-align: baseline
![]() vertical-align: sub vertical-align: super vertical-align: top vertical-align: text-top vertical-align: middle vertical-align: bottom vertical-align: text-bottom |